<template>
    <div id="company-data-main">
        <dv-border-box10>
            <el-row :gutter="20">
                <el-col :span="8">
                    <dv-border-box11 title="最受欢迎的公司" :animate="false">
                        <most-popular-company :data="employments" class="company-data"></most-popular-company>
                    </dv-border-box11>
                </el-col>
                <el-col :span="8">
                    <dv-border-box8 :dur="5">
                        <dv-decoration7 style="width:100%;height:50px;">
                            <div color-white font-300>
                                最不差钱的公司
                            </div>
                        </dv-decoration7>
                        <richest-company :data="employments" class="company-data"></richest-company>
                    </dv-border-box8>
                </el-col>
                <el-col :span="8">
                    <dv-border-box11 title="最近入职的公司" :animate="false">
                        <recently-joined-company :data="employments" class="company-data"></recently-joined-company>
                    </dv-border-box11>
                </el-col>
            </el-row>
        </dv-border-box10>
    </div>
</template>

<script setup>
import axios from 'axios'
import { onMounted, ref } from 'vue'
import MostPopularCompany from '../../components/company/MostPopularCompany.vue'
import RichestCompany from '../../components/company/RichestCompany.vue'
import RecentlyJoinedCompany from '../../components/company/RecentlyJoinedCompany.vue'

const employments = ref([])

const getEmployments = async () => {
    var res = await axios.get('/adminapi/employments')
    employments.value = res.data
}

onMounted(async () => await getEmployments())

</script>

<style lang="scss" scoped>
#company-data-main {
    background: url('../../assets/bg.png') no-repeat center;
    background-size: 100% 100%;
    padding: 20px;
    color: white;
    height: 600px;

    .el-row {
        height: 600px;
    }

    .company-data {
        position: absolute;
        top: 80px;
        width: 100%;
        text-align: center;
    }
}
</style>